<style scoped>
  .content .w980{
    padding-top: 0;
  }
  .nav-path{
    position: relative;
  }
  .nav-path ol{
    width: 100%;
    height: 36px;
  }
  .nav-path button.add-hsp-btn{
    position: absolute;
    top: 0;
    right: 0;
  }
  .nav-path ol li a{
    color: #444;
  }
  .nav-path ol li:last-child{
    color: #00CB8F;
  }
  button{
  	outline: none!important;
  }
  .breadcrumb{
  	margin-bottom: 0;
  	position: relative;
  }
  .modal-header .close{
  	margin: 0;
  	position: absolute;
    width: 16px;
    height: 16px;
    right: 10px;
    top: 10px;
    text-align: center;
    line-height: 16px;
  }
  /*机构列表*/
  .list-tips{
    padding: 0;
    height: 36px;
    line-height: 36px;
    background: #F5F5F4  url(../../assets/img/list_tips.png) no-repeat 20px center;
    background-size: 4px 20px;
  }
  .list-tips span{
    float: left;
    font-size: 16px;
    height: 36px;
    line-height: 36px;
    margin-left: 36px;
    text-align: left;
  }

	/*医院列表*/
	.form-group.limitManage{
		margin-bottom: 40px;
		margin-top: 20px;
		min-height: 580px;
	}
	.form-group.limitManage label,.form-group.limitManage aside{
		float: left;
	}
	.form-group.limitManage aside{
		border: 1px solid #E6E5E2;
	}
	.form-group.limitManage aside .hospital-list{
		height: 543px;
		overflow: auto;
		overflow-x: hidden;
	}
	.form-group.limitManage aside .hospital-list .list-content li{
		display: block;
	    height: 32px;
	    line-height: 32px;
	    font-size: 16px;
	    width: 100%;
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    text-indent: 10px;
	    cursor: pointer;
	}
	.form-group.limitManage aside .hospital-list .list-content li:hover{
		color: #fff;
		background-color: #1dc466;
	}
	/*被点击*/
	.form-group.limitManage aside .hospital-list .list-content li.active{
		color: #fff;
		background-color: #1dc499;
	}

	.form-group.limitManage aside.limit-hospital{
		width: 25%;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		margin-left: 13px;
		margin-right: 32px;
	}

	.form-group.limitManage aside.limit-hospital-detail{
		width: 70%;
		min-height: 580px;
	}
	.form-group.limitManage aside.limit-hospital-detail .hp-list-detail th,.form-group.limitManage aside.limit-hospital-detail .hp-list-detail td{
		padding:15px 5px;
	}
	.form-group.limitManage .limit-title{
		padding: 0;
		height: 37px;
		line-height: 37px;
		background: #F8F8F7  url(../../assets/img/list_tips.png) no-repeat 20px center;
		background-size: 4px 20px;
	}
	.form-group.limitManage .limit-title span{
		float: left;
		font-size: 16px;
		height: 37px;
		line-height: 37px;
		margin-left: 34px;
	}
	table tbody{
		border-bottom: 1px solid #ddd;
	}
	table tr th,table tr td{
		text-align: center;
		vertical-align: middle!important;
	}
	.list-content table tr:nth-child(odd){
		background-color: #fff;
	}
	.list-content table tr:nth-child(even){
		background-color: #F6FBF8;
	}
	.table>thead>tr>th{
		border: 0;
		font-weight: 400;
	}
	table tr td span.glyphicon{
		display: inline-block;
		width: 42px;
		height: 16px;
		font-size: 12px;
		text-align: right;
		margin-right: 5px;
		cursor: pointer;
		background-repeat: no-repeat!important;
		background-position: left center!important;
	}
	table tr td span:first-child{
		background: url(../../assets/img/watch.png) no-repeat left center;
		background-size: 17px 12px;
	}
	table tr td span:last-child{
		background: url(../../assets/img/dele4.png) no-repeat left center;
		background-size: 14px;
	}
	.exp-mark{
		color: red;
		height: 100%;
		line-height: 100%;
		font-size: 14px;
		margin-right: 5px;
		display: inline-block;
	}

	.list-opera .form-control{
		width: 220px;
	}


	/*删除提示*/
	#delCoverTips .modal-dialog .modal-content{
		width: 60%;
		margin: 0 auto;
	}
	.del-tips{
		height: 40px;
		line-height: 40px;
		text-align: center;
		font-size: 20px;
	}
	.del-tips span{
		color: #f00;
		padding: 0 3px;
	}
	.modal-footer .btn{
		width: 100px;
		margin-right: 20px;
		outline: none;
	}
	.modal-footer .btn.btn-primary{
		background-color: #00C782;
	}

	/*span-error*/
    span.error{
        color: #f00;
        display: block;
        width: 100%;
        padding-left: 14%;
        background: none;
        margin-bottom: 0;
        line-height: 30px;
        border: 0;
    }
	.exp-mark{
		color: red;
		height: 100%;
		line-height: 100%;
		font-size: 14px;
		margin-right: 8px;
		display: inline-block;
	}

	div.form-group.footer-btn{
		text-align: center;
	}
	.list-opera .form-inline{
		padding: 16px;
	}
	.clear-research.form-group button{
		display: inline-block;
		width: 100px;
		margin-left: 10px;
	}

</style>

<template>
	<div class="index clearafter">
		<!-- 头部组件 -->
	    <header-component></header-component>
	    <div class="content flex">
		    <!-- 侧部导航组件 -->
		    <div class="w220">
		        <aside-component></aside-component>
		    </div>
			<!-- 右部内容区 -->
			<div class="w980 flex_full">
				<!-- 路径导航 -->
				<nav class="nav-path">
					<ol class="breadcrumb">
					  <li>服务资质</li>
					</ol>
				</nav>
				<!-- 服务资质 -->
				<div class="fh-team-list">
				  <div class="form-group limitManage">
				    <!-- 服务资质列表 -->
				    <aside class="limit limit-hospital">
				    	<!-- 标题 -->
				    	<div class="limit-title">
				    		<span>实体对象类型</span>
				    	</div>
						 <div class="hospital-list">
	                        <ul class="list-content">
	                        	<li v-for="($index,item) in dictionary.objectType" title="{{item.text}}" v-text="item.text" :class="{'active':$index == activeNum}" @click="requestServiceList($index,item.key)"></li>
	                        </ul>
	                    </div>
				    </aside>
				    <!-- 服务项目列表 -->
				    <aside class="limit limit-hospital-detail">
				    	<div class="limit-title">
				    		<span>服务项目列表</span>
				    		<button class="fr default ok add-hsp-btn" @click="searchUnselectList">新 增</button>
				    	</div>
						<div class="hp-list-detail">
							<table class="table table-hover">
	 	                        <thead>
	 	                            <tr>
	 	                                <th class="col-md-4">代码</th>
	 	                                <th class="col-md-4">名称</th>
	 	                                <th class="col-md-4">操作</th>
	 	                            </tr>
	 	                        </thead>
	 	                        <tbody>
	 	                            <tr v-for="item in serverData">
	 	                                <td>{{item.serviceCode}}</td>
	 	                                <td>{{item.serviceName}}</td>
	 	                                <td>
	 	                                	<span class="glyphicon" @click="delService(item)">删除</span>
	 	                                </td>
	 	                            </tr>
	 	                            <tr class="no-data" v-if="isData">
	 	                            	<td colspan="3">暂无查询记录</td>
	 	                            </tr>
	 	                        </tbody>
	 	                    </table>
	 	                    <!-- <bootpage-component v-ref:page :async="true" :lens="lenArr" :page-len="pageLen" :headersparam="headersparam" :param="param"></bootpage-component> -->
						</div>
				    </aside>
				  </div>
				</div>
				<!--添加-->
				<div class="modal fade" id="search-lis-cover" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                      <div class="modal-dialog" style="width:750px">
                          <div class="modal-content ">
                            <div class="modal-header">
                                <div class="list-tips breadcrumb">
                                    <span class="default-span">服务项目列表-查询</span>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button>
                                </div>
                            </div>
                            <div class="list-opera">
	                            <form class="form-inline">
	                              <div class="form-group">
	                                <label for="exampleInputName2">代码或名称</label>
	                                <input type="text" class="form-control" id="exampleInputName2" placeholder="请输入代码或名称" v-model="indexContent" />
	                              </div>
	                              <div class="clear-research form-group">
	                                <!-- <button type="button" class="ok default" @click.stop.prevent="researchEvent">查 询</button> -->
	                                <button type="button" class="ok default" @click.stop.prevent="saveServiceList">保 存</button>
	                              </div>
	                            </form>
                            </div>
                            <div style="height:400px;overflow-y: auto">
                              <table class="table table-bordered" style="width:95%; margin:0 auto">
                                  <thead>
	                                  <tr>
	                                      <th>选择</th>
	                                      <th>代码</th>
	                                      <th>名称</th>
	                                  </tr>
                                  </thead>
                                  <tbody id="tbodys">
	                                  <tr v-for="sel in selectList | filterBy indexContent">
	                                  	<!-- <tr v-for="sel in selectList"> -->
	                                        <td>
	                                        	<input type="checkbox" id="{{sel.serviceId}}" value="{{sel.serviceId}}" v-model="selected" />
	                                        </td>
	                                        <td>{{sel.serviceCode}}</td>
	                                        <td>{{sel.serviceName}}</td>
	                                    </tr>
	                                    <tr class="no-data" v-if="isData">
	                                        <td colspan="3">暂无相关记录!</td>
	                                    </tr>
                                  </tbody>
                              </table>
                            </div>
                          </div>
                      </div>
                    </div>
			</div><!-- 内容区-->
		</div>

		<!--删除提示 -->
		<div id="delCoverTips" class="modal fade" tabindex="-1" role="dialog">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title">删除</h4>
		      </div>
		      <div class="modal-body">
		        <p class="del-tips">您确定要删除<span v-text="delTeamName"></span>吗？</p>
		      </div>
		      <div class="modal-footer">
		        <div class="form-group footer-btn">
		        	<button type="button" class="save-btn" @click="confirmDeleteService">确认</button>
		        	<button type="button" class="cancel-btn" data-dismiss="modal">取消</button>
		        </div>
		      </div>
		    </div><!-- /.modal-content -->
		  </div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
	</div>
</template>

<script>
	import 'assets/reset.css';
	import 'assets/lib/bootstrap-3.3.2/css/bootstrap.min.css';
	import 'assets/lib/bootstrap-3.3.2/js/bootstrap.min.js';

	import Header from 'components/module-head.vue';
	import Asider from 'components/menu-list.vue';
	import footerPage from 'components/BootPage.vue';
	import Public from 'assets/public.js';

	export default {
		data () {
			return {
		  		//数据
		  		serverData: {},

		  		//查询选择列表
		  		selectList: {},

				//字典查询数据
				dictionary: {
					objectType:{},//实体对象类型,base_credentialsObjectType
				},

				//保存服务项目
				saveService: {
					objectTypeCode: '',
					serviceId: ''
				},

				selected: [],

				//当前点击下标数
				activeNum: 0,

				//匹配的内容
				indexContent: '',

                //被删除--
                delTeamName: '',
                //删除-提交主键id
                majorKey: '',
                //实体对象代码缓存
                objectCache: '',

                //是否有记录
                isData: false
			}
		},
		events: {},
		watch: {},
		ready () {
			//数据字典
			this.dictionaryRequest();
		},
		components: {
			//头部组件
			'header-component': Header,
			//侧部导航组件
			'aside-component': Asider,
			'bootpage-component': footerPage
		},
		methods: {
			//字典请求
			dictionaryRequest () {
				var that = this;
				var arr = ["base.dictionary.base_credentialsObjectType"];
				$.when(Public.commonajax('coms.multipleDictionaryService','findDic','['+JSON.stringify(arr)+']')).done(function(res){
					$.each(res.body,function(index,ele){
						if(ele.dicId == arr[0]){
							that.dictionary.objectType = ele.items;
							that.requestFirstData (ele.items[0]['key']);
							that.objectCache = ele.items[0]['key'];
							//alert(ele.items[0]['key'])
						}
					});
				});
			},

			//请求首条对象资质列表
			requestFirstData (first) {
				$.when(Public.commonajax('coms.objectTypeCredentialsService','queryByObjectTypeCode','["'+first+'"]')).done((res)=>{
					if(res.code == 200){this.serverData = res.body}
				});
			},

			//请求对象资质列表
			requestServiceList (index,key) {
				this.activeNum = index;
				this.objectCache = key;
				$.when(Public.commonajax('coms.objectTypeCredentialsService','queryByObjectTypeCode','["'+key+'"]')).done((res)=>{
					if(res.code == 200){this.serverData = res.body}
				});
			},

			//查询搜索
			researchEvent () {
				//indexContent
				$.each(this.selectList,(index,ele)=>{
					if(this.indexContent == ele.serviceCode || this.indexContent == ele.serviceName){
						document.getElementById(ele.serviceId).scrollIntoView(true);
						$("#tbodys").find("tr").css('background','#fff');
						document.getElementById(ele.serviceId).parentNode.parentNode.style.background = '#1dc499';
					}
				});
			},

			//查询资质服务项目未选择列表
			searchUnselectList () {
				this.selectList = [];
				this.selected = [];
				this.indexContent = '';
				$('#search-lis-cover').modal('show');
				$.when(Public.commonajax('coms.objectTypeCredentialsService','queryServiceInfoByObjectTypeCode','["'+this.objectCache+'"]')).done((res)=>{
					if(res.code == 200){this.selectList = res.body}
				});
			},

			//保存服务项目列表
			saveServiceList () {
				var arr = [];
				$.each(this.selected,(index,ele)=>{
					var saveService = {
						'objectTypeCode': this.objectCache,
						'serviceId': ele
					};
					arr.push(saveService);
				});
				$.when(Public.commonajax('coms.objectTypeCredentialsService','saveCredentials','['+JSON.stringify(arr)+']')).done((res)=>{
					if(res.code == 200){
						this.selectList = res.body;
						$('#search-lis-cover').modal('hide');
						this.requestFirstData(this.objectCache);
						Public.ajaxPrompt('保存成功！');
					}else{Public.ajaxPrompt(res.msg)}
				});
			},

			//删除医生
			delService (item) {
				this.delTeamName = item.serviceName;
				this.majorKey = item.id;
				$('#delCoverTips').modal('show');
			},

			//确定删除医生
			confirmDeleteService () {
				var that = this;
				$('#delCoverTips').modal('hide');
				$.when(Public.commonajax('coms.objectTypeCredentialsService','deleteObjectTypeCredentials','["'+this.majorKey+'"]')).done((res)=>{
					if(res.code == 200){
						Public.ajaxPrompt('删除成功！');
						that.requestFirstData(this.objectCache);
					}else{
						Public.ajaxPrompt(res.msg);
					};
				});
			}
		}//methods
	}


</script>
